<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
    <template #header>
      <span class="cardHeader">{{ apartmentForm.id ? "修改公寓" : "添加公寓" }}</span>
    </template>
    <AreaSelector :disabled="true"></AreaSelector>

    <el-form label-width="120px" style="width: 70%;">
      <el-form-item label="公寓名称">
        <el-input v-model="apartmentForm.name"></el-input>
      </el-form-item>

      <el-form-item label="公寓介绍">
        <el-input type="textarea" v-model="apartmentForm.introduction"></el-input>
      </el-form-item>

          <el-form-item label="地区">
            <el-select  @change="doGetCityList()"  v-model="apartmentForm.provinceId" placeholder="请选择省份" clearable >
              <el-option v-for="province in provinceList" :key="province.id"  :label="province.name" :value="province.id" />
            </el-select>
            &nbsp; &nbsp;
            <el-select @change="doGetDistrictList()" v-model="apartmentForm.cityId" placeholder="请选择城市" clearable>
              <el-option v-for="city in cityList" :key="city.id" :label="city.name" :value="city.id" />
            </el-select>
            &nbsp; &nbsp;
            <el-select  v-model="apartmentForm.districtId" placeholder="请选择区域"  clearable >
              <el-option v-for="district in districtList" :key="district.id" :label="district.name" :value="district.id" />
            </el-select>
          </el-form-item>
      <el-form-item label="详细地址">
        <el-input placeholder="请输入详细地址" v-model="apartmentForm.addressDetail"></el-input>
      </el-form-item>
      <el-form-item label="公寓前台电话">
        <el-input placeholder="请输入详细地址" v-model="apartmentForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="是否发布">
        <el-radio-group v-model="apartmentForm.isRelease">
          <el-radio :label="0">未发布</el-radio>
          <el-radio :label="1">已发布</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="公寓配套">
        <el-select v-model="apartmentForm.facilityInfoIds" style="width: 100%;" multiple clearable
          placeholder="请选择公寓配套">
          <el-option :label="facilityInfo.name" :value="facilityInfo.id"
            v-for="(facilityInfo, index) in facilityList" :key="facilityInfo.id">
          </el-option>
        </el-select>
      </el-form-item>



      <el-form-item label="公寓标签">
        <el-select v-model="apartmentForm.labelIds" style="width: 100%;" multiple clearable @change=""
          placeholder="请选择公寓标签">
          <el-option :value="item.id" :label="item.name" v-for="(item, index) in labelList" :key="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="公寓图片">
        <el-upload v-model:file-list="apartmentForm.graphVoList" action="/admin/file/upload" list-type="picture-card"
          :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handleSuccess"
          :headers="{ ACCESS_TOKEN: userStore().token }" >
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <el-form-item>
          <div class="btnGroup">
            <el-button style="width: 150px;" >取消</el-button>
            <el-button style="width: 150px;" @click="saveOrUpdate()" type="primary">确认</el-button>
          </div>
      </el-form-item>
    </el-form>

  </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: '', //组件名称
})
</script>
<script lang="ts" setup>
import { ref , onMounted} from "vue"
import userStore from '@/store/modules/login/userStore'
import {useRouter} from 'vue-router'


//---------展示省市区联动
import {
    type ProvinceType,
    type CityType,
    type DistrictType,
    getProvinceList,
    getCityList,
    getDistrictList
} from  '@/api/region/index'

import { ApartmentParamType,
         ApartmentData,
         PageResData,
         getApartmentList,
         removeApartmentById,saveOrUpdateApartment} from '@/api/apartmentManagement/apartment'   

import {LabelType,getLabelList} from '@/api/label/index'         
import {FacilityType,getFacilityList} from '@/api/facility/index'         

//定义接收的响应式数据
let provinceList = ref<ProvinceType[]>([]);
let cityList = ref<CityType[]>([]);
let districtList = ref<DistrictType[]>([]);

// let queryVoParam = ref({
//   provinceId:null,
//   cityId:null,
//   districtId:null
// })


//定义数据回显模型
const apartmentForm = ref<ApartmentData>({
      id: '',
      name: '',
      introduction: '',
      districtId: '',
      districtName: '',
      cityId: '',
      cityName: '',
      provinceId: '',
      provinceName: '',
      addressDetail: '',
      phone: '',
      isRelease: '',
      // 	公寓配套id
      facilityInfoIds: [],
      // 	公寓配套信息
      facilityInfoList: [],
      // 	公寓标签id
      labelIds: [],
      // 公寓标签信息
      labelInfoList: [],
      // 图片信息
      graphVoList: []
})


//三个调用api的方法
//进入以后就调用
let doGetProvinceList = async()=>{
  let {code,data} = await getProvinceList();
  if(code==200){
    provinceList.value = data;
  }
}

//第一个change第二个调用
let doGetCityList = async()=>{
  //省份改成触发
  apartmentForm.value.cityId = null;
  apartmentForm.value.districtId = null;
  let {code,data} = await getCityList(apartmentForm.value.provinceId);
  if(code==200){
    cityList.value = data;
  }
}
//第二个change第三个调用
let doGetDistrictList = async()=>{
  apartmentForm.value.districtId = null;
  let {code,data} = await getDistrictList(apartmentForm.value.cityId);
  if(code==200){
    districtList.value = data;
  }
}


//定义标签和配套的获取方法

let labelList = ref<LabelType[]>([])
let facilityList = ref<FacilityType[]>([])


let doGetLabelList = async()=>{
  let {code ,data} = await getLabelList();
  if(code == 200){
    labelList.value = data;
  }
}


let doGetFacilitylList = async()=>{
  let {code,data} = await getFacilityList();
  if(code == 200){
    facilityList.value = data;
  }
}


onMounted(()=>{
  doGetProvinceList();
  doGetLabelList();
  doGetFacilitylList();
});


let router = useRouter();

//保存或者更新
let saveOrUpdate = async()=>{
  let {code} = await saveOrUpdateApartment(apartmentForm.value);
  if(code==200){
    //回到展示页面
    router.push("/apartmentManagement/apartmentManagement/apartmentManagement");
  }
}
</script>

<style lang="scss" scoped></style>